<template>
  <section class="login-wrap">
    <n3-form ref='form' class="login-form">
      <h3>系统登录</h3>
      <div class="fields">
        <n3-input class="field" v-model="username" placeholder="账号" width="320px"></n3-input>
        <n3-input class="field" v-model="password" type="password" placeholder="密码" width="320px" @keyup.native.enter="check"></n3-input>
        <n3-checkbox-group v-model="remember" class="save-account">
          <n3-checkbox label="remember">记住账号</n3-checkbox>
        </n3-checkbox-group>
      </div>
      <div class="submit">
        <n3-button @click.native="check" type="primary" :loading="loading" :disabled="loading" block>
          {{ loading ? '登录中' : '登录' }}
        </n3-button>
      </div>
    </n3-form>
    <canvas id="J_loginBackground"></canvas>
  </section>
</template>

<style lang="less">
  .login-wrap {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #333333;
    canvas {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }

  .login-form {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 20%;
    left: 0;
    right: 0;
    margin: auto;
    padding: 16px 20px 0;
    width: 360px;
    height: 252px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 2px 2px 32px 1px rgba(0, 0, 0, .45);
    opacity: .75;
    h3 {
      margin-top: 0;
      margin-bottom: 0;
      padding: 12px 0;
      font-weight: normal;
      font-size: 22px;
      text-align: center;
    }
    .field {
      display: block;
      margin: 0 auto;
      padding: 6px 0;
    }
    .submit {
      padding: 12px 0;
    }
  }
</style>
